<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      top="4vh"
      :title="this.imgfile.filename"
      center
    >
      <div
        class="imgbox"
        style="
          max-height: 750px;
          overflow-x: hidden;
          overflow-y: scroll;
          line-height: 30px;
          text-align: center;
        "
      >
        <img width="100%" :src="imgPath" alt="" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin-right: 10px" @click="gopimg">上一张</el-button>
        <el-button type="primary" icon="el-icon-download" @click="downloadimg" style="margin: auto; width: 50%">下载</el-button>
        <el-button type="primary" @click="topimg()">下一张</el-button>
      </span>
    </el-dialog>

    <el-form label-position="left">
      <el-row :gutter="20">
        <!-- 协办人 -->
        <el-col :span="7">
          <el-form-item label-width="120px">
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-renshixitong"></i>
                <span class="itemtle">协办人</span>
              </span>
            </span>
            <div style="position: relative">
              <el-popover
                placement="top-start"
                title="协办人"
                width="200"
                trigger="hover"
                :content="extInfo.joiners"
              >
                <p slot="reference" style="width: 50%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                  {{ extInfo.joiners }}
                </p>
              </el-popover>
              <el-button
                size="mini"
                style="
                  margin-left: 15px;
                  position: absolute;
                  top: 6px;
                  left: 50%;
                "
                @click="selectPeople()"
                v-if="ismodify"
                >选人
              </el-button>
            </div>
          </el-form-item>
        </el-col>
       
        <!-- 是否需要审批 -->
        <el-col :span="8">
          <el-form-item>
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-zhongfu isbt"></i>
                <span class="itemtle">需要审批</span>
              </span>
            </span>
            <el-checkbox v-model="basicInfo.needShenpi" :disabled="!ismodify "></el-checkbox>
          </el-form-item>
        </el-col>
        <!-- 审批人 -->
          <el-col :span="9">
          <el-form-item label-width="120px" :required="basicInfo.needShenpi">
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-renshixitong"></i>
                <span class="itemtle">审批人</span>
              </span>
            </span>
            <div style="position: relative">
              <el-popover
                placement="top-start"
                title="审批人"
                width="200"
                trigger="hover"
                :content="extInfo.approverName"
              >
                <p slot="reference" style="width: 50%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                  {{ extInfo.approverName }}
                </p>
              </el-popover>
              <el-button
               :disabled="basicInfo.needShenpi==false"
                size="mini"
                style="
                  margin-left: 15px;
                  position: absolute;
                  top: 6px;
                  left: 50%;
                "
                @click="selectPeople1()"
                v-if="ismodify"
                >选人
              </el-button>
            </div>
          </el-form-item>
        </el-col>
        <!-- 是否督办事项 -->
        <el-col :span="extInfo.duBan ? 7 : 24">
          <el-form-item>
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-zhongfu isbt"></i>
                <span class="itemtle">督办事项</span>
              </span>
            </span>
            <el-checkbox v-model="extInfo.duBan" :disabled="!ismodify "></el-checkbox>
          </el-form-item>
        </el-col>
        <!-- 督办类型 -->
           <el-col :span="8" v-show="extInfo.duBan">
          <el-form-item label-width="120px" required>
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-jinjichengdu"></i>
                <span class="itemtle">督办类型</span>
              </span>
            </span>
            <div class="sle">
              <el-select
                v-model="extInfo.dbType"
                placeholder="请选择"
                size="mini"
                style="width: 80%"
                v-if="ismodify"
              >
                <el-option
                  v-for="item in extInfo.dbTypeEnums"
                  :key="item.id"
                  :label="item.disPlay"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <p v-else>{{ extInfo.dbTypeName }}</p>
            </div>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label-width="120px">
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-canyu"></i>
                <span class="itemtle">参与部门</span>
              </span>
            </span>

                                 {{extInfo.joinDepartments}}-->
            <!--                    <el-button  size="mini" style="margin-left: 15px" @click="selectPeoples()" v-if="ismodify">选择部门</el-button>-->
            <!-- <div style="position: relative">
              <el-popover
                placement="top-start"
                title="参与部门"
                width="200"
                trigger="hover"
                :content="extInfo.joinDepartments"
              >
                <p
                  slot="reference"
                  style="
                    width: 50%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ extInfo.joinDepartments }}
                </p>
              </el-popover>

              <el-button
                size="mini"
                style="
                  margin-left: 15px;
                  position: absolute;
                  top: 6px;
                  left: 50%;
                "
                @click="selectPeoples()"
                v-if="ismodify"
                >选择部门
              </el-button>
            </div>
          </el-form-item>
        </el-col> --> 
        <!-- 督办 -->
        <el-col :span="9" v-show="extInfo.duBan">
          <el-form-item label-width="120px" required>
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-dubanren"></i>
                <span class="itemtle">督办人</span>
              </span>
            </span>
            {{ extInfo.supervise }}
            <el-button
              size="mini"
              style="margin-left: 120px"
              @click="selectPeopled()"
              v-if="ismodify"
              >选人
            </el-button>
          </el-form-item>
        </el-col>
          <!-- 发起人 -->
        <el-col :span="7">
          <el-form-item label-width="120px" required>
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-renshixitong"></i>
                <span class="itemtle">发起人</span>
              </span>
            </span>
            <div style="position: relative">
              <el-popover
                placement="top-start"
                title="发起人"
                width="200"
                trigger="hover"
                :content="basicInfo.publisher"
              >
                <p slot="reference" style="width: 50%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                  {{ basicInfo.publisher }}
                </p>
              </el-popover>
              <el-button
                size="mini"
                style="
                  margin-left: 15px;
                  position: absolute;
                  top: 6px;
                  left: 50%;
                "
                @click="selectPeople2()"
                v-if="ismodify"
                >选人
              </el-button>
            </div>
          </el-form-item>
        </el-col>
         <!-- 任务编码 -->
        <el-col :span="8">
          <el-form-item label-width="120px">
            <span slot="label">
              <span class="span-box">
                <!-- <i class="iconfont icon-zerenren"></i> -->
                <span class="itemtle">任务编码</span>
              </span>
            </span>
            <el-input class="taskId" disabled style="width:80%;" v-model="extInfo.taskNum"></el-input>
            <!-- {{ basicInfo.publisher }}
            <el-button size="mini" style="margin-left: 20px" @click="selectPeopless()" v-if="ismodify">选人</el-button> -->
          </el-form-item>
        </el-col>
        <!-- 任务类型 -->
           <el-col :span="9">
          <el-form-item label-width="120px">
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-jinjichengdu"></i>
                <span class="itemtle">任务类型</span>
              </span>
            </span>
            <div class="sle">
              <el-select
                v-model="basicInfo.taskType"
                :disabled="isType"
                placeholder="请选择"
                size="mini"
                style="width: 75%"
                v-if="ismodify"
              >
                <el-option
                  v-for="item in tags"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <p v-else>{{ basicInfo.taskTypeName }}</p>
            </div>
          </el-form-item>
        </el-col>
         <!-- 权重 -->
        <el-col :span="7">
          <el-form-item label-width="130px" required>
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-quanzhong"></i>
                <span class="itemtle">权重(%)</span>
              </span>
            </span>
            <!--  <el-input style="width: 60%" v-model="basicInfo.weight"></el-input>-->
            <el-input-number v-model="basicInfo.weight" :precision="2" :min="0" :step="5" :max="100"
                             label="权重" size="mini" v-show="ismodify"
                             :disabled="basicInfo.taskLevel == '1'">
            </el-input-number>
            <p v-show="!ismodify">{{ basicInfo.weight }}</p>
          </el-form-item>
        </el-col>
        <!-- 是否自动计算进度 -->
        <el-col :span="8">
          <el-form-item label-width="160px">
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-zidongjisuantuopu isbt"></i>
                <span class="itemtle">自动计算进度</span>
              </span>
            </span>
            <el-checkbox v-model="basicInfo.weightStyle" :disabled="!ismodify"></el-checkbox>
          </el-form-item>
        </el-col>
          <!-- 任务进度 -->
        <el-col :span="9">
          <el-form-item label-width="120px">
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-jindu  isbt"></i>
                <span class="itemtle">任务进度</span>
              </span>
            </span>
            <el-row>
              <el-col :span="2.5" :gutter="5">
                <div style="text-align: center">
                  <el-button @click="decrease" size="mini" icon="el-icon-minus" v-show="ismodify"></el-button>
                </div>
              </el-col>
              <el-col :span="14">
                <el-progress :percentage="basicInfo.processRateNum" color="#5cb87a"
                                style="margin-top: 12px;width: 100%;text-align: center">
                </el-progress>
              </el-col>
              <el-col :span="2.5">
                <div style="text-align: center">
                  <el-button @click="increase" size="mini" icon="el-icon-plus" v-show="ismodify"></el-button>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label-width="120px">
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-yujingjinggao"></i>
                <span class="itemtle">提醒周期(天)</span>
              </span>
            </span>
            <!--                    <el-input style="width: 60%" v-model="extInfo.reportCycle"></el-input>-->
            <!-- <el-input-number
              v-model="extInfo.reportCycle"
              :min="0"
              :step="1"
              :max="7"
              size="mini"
              v-if="ismodify"
            ></el-input-number>
              <p v-else>{{ extInfo.reportCycle }}</p>
          </el-form-item>
        </el-col> --> 
        <!-- <el-col :span="12">
          <el-form-item label-width="120px">
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-jinjichengdu"></i>
                <span class="itemtle">紧急程度</span>
              </span>
            </span>
            <div class="sle">
              <el-select
                v-model="extInfo.importantLevelId"
                placeholder="请选择"
                size="mini"
                style="width: 35%"
                v-if="ismodify"
              >
                <el-option
                  v-for="item in extInfo.importantLevelEnums"
                  :key="item.code"
                  :label="item.disPlay"
                  :value="item.code"
                >
                </el-option>
              </el-select>
              <p v-else>{{ extInfo.importantLevel }}</p>
            </div>
          </el-form-item>
        </el-col> -->
        <!-- 前置任务 -->
        <el-col :span="12">
          <el-form-item label-width="120px">
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-qianzhirenwu"></i>
                <span class="itemtle">前置任务</span>
              </span>
            </span>

            <div style="position: relative" @click="showFrontTask">
              <el-popover
                placement="top-start"
                title="前置任务"
                width="200"
                trigger="hover"
                :content="extInfo.frontTask"
              >
                <p
                  slot="reference"
                  style="
                    margin-right: 15px;
                    width: 45%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ extInfo.frontTask }}
                </p>
              </el-popover>
              <div style="position: absolute; left: 58%; top: 0">
                <el-button
                  @click="getTaskData('qz')"
                  size="mini"
                  v-if="ismodify"
                  >选择</el-button
                >
                <el-button
                  v-if="extInfo.frontTask && ismodify"
                  @click="emptyFrontTask"
                  type="danger"
                  size="mini"
                  >清空</el-button
                >
              </div>
            </div>
            <div class="diobox">
              <el-dialog
                title="前置任务"
                :visible.sync="dialogTableVisible"
                top="10vh"
              >
                <div class="tabbox">
                  <div style="width: 100%">
                    <el-row :gutter="5">
                      <el-col :span="6">
                        <el-select
                          v-model="search.personType"
                          placeholder="请选择"
                          style="min-width: 95px; max-width: 15%"
                          size="mini"
                          @change="restsear"
                        >
                          <el-option
                            v-for="(item, index) in search.personList"
                            :key="index"
                            :label="item"
                            :value="item"
                          >
                          </el-option>
                        </el-select>
                        <span v-cloak style="padding: 0 10px">{{
                          search.pertxt
                        }}</span>
                        <el-button
                          size="mini"
                          @click="selectPeopless(search.personType)"
                          type="info"
                          >选择</el-button
                        >
                      </el-col>
                      <el-col :span="8">
                        <el-select
                          v-model="search.taskinfo"
                          placeholder="请选择"
                          style="min-width: 95px; max-width: 15%"
                          size="mini"
                          @change="restsear"
                        >
                          <el-option
                            v-for="(item, index) in search.infoList"
                            :key="index"
                            :label="item"
                            :value="item"
                          >
                          </el-option>
                        </el-select>
                        <el-input
                          v-model="search.taskNum"
                          size="mini"
                          style="width: 150px"
                          v-show="search.taskinfo == '任务编码'"
                          placeholder="任务编码"
                        ></el-input>
                        <el-input
                          v-model="search.title"
                          size="mini"
                          style="width: 150px"
                          v-show="search.taskinfo == '任务标题'"
                          placeholder="任务标题"
                        ></el-input>
                        <el-input-number
                          controls-position="right"
                          v-model="search.taskLevel"
                          size="mini"
                          v-show="search.taskinfo == '任务层级'"
                        ></el-input-number>
                        <el-input
                          v-model="search.taskType"
                          size="mini"
                          style="width: 150px"
                          v-show="search.taskinfo == '任务类型'"
                          placeholder="任务类型"
                        ></el-input>

                        <el-date-picker
                          style="width: 205px"
                          v-model="search.startDate"
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="mini"
                          v-show="search.taskinfo == '开始时间'"
                        ></el-date-picker>

                        <el-date-picker
                          style="width: 205px"
                          v-model="search.endTime"
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="mini"
                          v-show="search.taskinfo == '结束时间'"
                        ></el-date-picker>
                      </el-col>
                      <el-col :span="5">
                        <el-select
                          v-model="search.taskStatus"
                          placeholder="请选择"
                          style="min-width: 95px; max-width: 15%"
                          size="mini"
                          @change="restsear"
                        >
                          <el-option
                            v-for="(item, index) in search.statusList"
                            :key="index"
                            :label="item"
                            :value="item"
                          >
                          </el-option>
                        </el-select>
                        <el-select
                          v-model="search.taskState"
                          placeholder="请选择"
                          style="width: 100px"
                          size="mini"
                          v-show="search.taskStatus == '任务状态'"
                        >
                          <el-option
                            v-for="(item, index) in taskStatus"
                            :key="index"
                            :label="item.disPlay"
                            :value="item.code"
                          >
                          </el-option>
                        </el-select>
                        <el-select
                          v-model="search.approveState"
                          placeholder="请选择"
                          style="width: 100px"
                          size="mini"
                          v-show="search.taskStatus == '任务审批状态'"
                        >
                          <el-option
                            v-for="(item, index) in approveList"
                            :key="index"
                            :label="item.disPlay"
                            :value="item.code"
                          >
                          </el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="4">
                        <el-button
                          type="info"
                          @click="searcht"
                          size="mini"
                          style="margin-left: 10px"
                          plain
                          >搜索
                        </el-button>
                        <el-button
                          type="warning"
                          @click="setqk"
                          size="mini"
                          style="margin-left: 10px"
                          plain
                          >清空
                        </el-button>
                      </el-col>
                    </el-row>
                  </div>
                  <el-table
                    :data="listData"
                    size="mini"
                    border
                    :row-class-name="tableRowClassName"
                    highlight-current-row
                    @current-change="handleCurrentChange"
                  >
                    <el-table-column
                      align="center"
                      property="basicInfo.title"
                      width="120"
                      :show-overflow-tooltip="true"
                      label="任务名称"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      property="basicInfo.taskLevel"
                      label="任务层级"
                      width="70"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="开始时间-结束时间"
                      width="180"
                    >
                      <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{
                          scope.row.basicInfo.startDate +
                            " - " +
                            scope.row.basicInfo.endTime
                        }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      property="basicInfo.publisher"
                      label="发起人"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      property="basicInfo.manager"
                      label="负责人"
                    ></el-table-column>
                    <el-table-column
                      property="basicInfo.title"
                      label="任务进度"
                    >
                      <template slot-scope="scope">
                        <el-progress
                          :percentage="scope.row.basicInfo.processRateNum"
                          color="#5cb87a"
                          style="margin-top: 12px; width: 100%"
                        ></el-progress>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      property="basicInfo.state"
                      label="任务状态"
                    ></el-table-column>
                  </el-table>
                  <el-pagination
                    background
                    :page-size="10"
                    @current-change="fy"
                    :current-page="page.pageNo"
                    layout="prev, pager, next"
                    :total="page.total"
                  >
                  </el-pagination>
                </div>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogTableVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="cz">确 定</el-button>
                </div>
              </el-dialog>
            </div>
          </el-form-item>
        </el-col>
        <!-- 后续任务 -->
         <el-col :span="12">
          <el-form-item label-width="120px">
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-qianzhirenwu"></i>
                <span class="itemtle">后续任务</span>
              </span>
            </span>

            <div style="position: relative" @click="showAfterTask">
              <el-popover
                placement="top-start"
                title="后续任务"
                width="200"
                trigger="hover"
                :content="extInfo.afterTask"
              >
                <p
                  slot="reference"
                  style="
                    margin-right: 15px;
                    width: 45%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ extInfo.afterTask }}
                </p>
              </el-popover>
              <div style="position: absolute; left: 58%; top: 0">
                <el-button
                  @click="getTaskData('hz')"
                  size="mini"
                  v-if="ismodify"
                  >选择</el-button
                >
                <el-button
                  v-if="extInfo.afterTask && ismodify"
                  @click="emptyAfterTask"
                  type="danger"
                  size="mini"
                  >清空</el-button
                >
              </div>
            </div>
            <div class="diobox">
              <el-dialog
                title="后续任务"
                :visible.sync="dialogTableVisible1"
                top="10vh"
              >
                <div class="tabbox">
                  <div style="width: 100%">
                    <el-row :gutter="5">
                      <el-col :span="6">
                        <el-select
                          v-model="search1.personType"
                          placeholder="请选择"
                          style="min-width: 95px; max-width: 15%"
                          size="mini"
                          @change="restsear"
                        >
                          <el-option
                            v-for="(item, index) in search1.personList"
                            :key="index"
                            :label="item"
                            :value="item"
                          >
                          </el-option>
                        </el-select>
                        <span v-cloak style="padding: 0 10px">{{
                          search1.pertxt
                        }}</span>
                        <el-button
                          size="mini"
                          @click="selectPeopless(search1.personType)"
                          type="info"
                          >选择</el-button
                        >
                      </el-col>
                      <el-col :span="8">
                        <el-select
                          v-model="search1.taskinfo"
                          placeholder="请选择"
                          style="min-width: 95px; max-width: 15%"
                          size="mini"
                          @change="restsear"
                        >
                          <el-option
                            v-for="(item, index) in search1.infoList"
                            :key="index"
                            :label="item"
                            :value="item"
                          >
                          </el-option>
                        </el-select>
                         <el-input
                          v-model="search1.taskNum"
                          size="mini"
                          style="width: 150px"
                          v-show="search1.taskinfo == '任务编码'"
                          placeholder="任务编码"
                        ></el-input>
                        <el-input
                          v-model="search1.title"
                          size="mini"
                          style="width: 150px"
                          v-show="search1.taskinfo == '任务标题'"
                          placeholder="任务标题"
                        ></el-input>
                        <el-input-number
                          controls-position="right"
                          v-model="search1.taskLevel"
                          size="mini"
                          v-show="search1.taskinfo == '任务层级'"
                        ></el-input-number>
                        <el-input
                          v-model="search1.taskType"
                          size="mini"
                          style="width: 150px"
                          v-show="search1.taskinfo == '任务类型'"
                          placeholder="任务类型"
                        ></el-input>

                        <el-date-picker
                          style="width: 205px"
                          v-model="search1.startDate"
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="mini"
                          v-show="search1.taskinfo == '开始时间'"
                        ></el-date-picker>

                        <el-date-picker
                          style="width: 205px"
                          v-model="search1.endTime"
                          value-format="yyyy-MM-dd"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="mini"
                          v-show="search1.taskinfo == '结束时间'"
                        ></el-date-picker>
                      </el-col>
                      <el-col :span="5">
                        <el-select
                          v-model="search1.taskStatus"
                          placeholder="请选择"
                          style="min-width: 95px; max-width: 15%"
                          size="mini"
                          @change="restsear"
                        >
                          <el-option
                            v-for="(item, index) in search1.statusList"
                            :key="index"
                            :label="item"
                            :value="item"
                          >
                          </el-option>
                        </el-select>
                        <el-select
                          v-model="search1.taskState"
                          placeholder="请选择"
                          style="width: 100px"
                          size="mini"
                          v-show="search1.taskStatus == '任务状态'"
                        >
                          <el-option
                            v-for="(item, index) in taskStatus"
                            :key="index"
                            :label="item.disPlay"
                            :value="item.code"
                          >
                          </el-option>
                        </el-select>
                        <el-select
                          v-model="search1.approveState"
                          placeholder="请选择"
                          style="width: 100px"
                          size="mini"
                          v-show="search1.taskStatus == '任务审批状态'"
                        >
                          <el-option
                            v-for="(item, index) in approveList"
                            :key="index"
                            :label="item.disPlay"
                            :value="item.code"
                          >
                          </el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="4">
                        <el-button
                          type="info"
                          @click="searcht1"
                          size="mini"
                          style="margin-left: 10px"
                          plain
                          >搜索
                        </el-button>
                        <el-button
                          type="warning"
                          @click="setqk1"
                          size="mini"
                          style="margin-left: 10px"
                          plain
                          >清空
                        </el-button>
                      </el-col>
                    </el-row>
                  </div>
                  <el-table
                    :data="listData"
                    size="mini"
                    border
                    :row-class-name="tableRowClassName"
                    highlight-current-row
                    @current-change="handleCurrentChange1"
                  >
                    <el-table-column
                      align="center"
                      property="basicInfo.title"
                      width="120"
                      :show-overflow-tooltip="true"
                      label="任务名称"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      property="basicInfo.taskLevel"
                      label="任务层级"
                      width="70"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="开始时间-结束时间"
                      width="180"
                    >
                      <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{
                          scope.row.basicInfo.startDate +
                            " - " +
                            scope.row.basicInfo.endTime
                        }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      property="basicInfo.publisher"
                      label="发起人"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      property="basicInfo.manager"
                      label="负责人"
                    ></el-table-column>
                    <el-table-column
                      property="basicInfo.title"
                      label="任务进度"
                    >
                      <template slot-scope="scope">
                        <el-progress
                          :percentage="scope.row.basicInfo.processRateNum"
                          color="#5cb87a"
                          style="margin-top: 12px; width: 100%"
                        ></el-progress>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      property="basicInfo.state"
                      label="任务状态"
                    ></el-table-column>
                  </el-table>
                  <el-pagination
                    background
                    :page-size="10"
                    @current-change="fy1"
                    :current-page="page1.pageNo"
                    layout="prev, pager, next"
                    :total="page1.total"
                  >
                  </el-pagination>
                </div>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogTableVisible1 = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="cz1">确 定</el-button>
                </div>
              </el-dialog>
            </div>
          </el-form-item>
        </el-col>
        <!-- 实际完成时间 -->
        <el-col span="10" style="float:left" v-if="basicInfo.completionTime&&!ismodify">
          <el-form-item label-width="120px" style="margin-left:0px">
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-jihuashijian"></i>
                <span class="itemtle">实际完成时间</span>
              </span>
            </span>
              <!-- <span style="color: red;margin-left: 10px" v-show="ismodify">周期性任务无需填写此信息</span> -->
              <p v-show="!ismodify">{{basicInfo.completionTime}}</p>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="24">
          <el-form-item label-width="120px">
            <span slot="label">
              <span class="span-box">
                <i class="iconfont icon-fujian1"></i>
                <span class="itemtle">任务附件</span>
              </span>
            </span>
            <el-upload
              :disabled="!ismodify"
              class="upload-demo"
              multiple
              action="/seeyon/rest/attachment?applicationCategory=0&extensions=&firstSave=true?option.n_a_s=1"
              :on-change="handleChange"
              :on-success="handleAvatarSuccess"
              :on-preview="showfile"
              ref="upload"
              :before-remove="beforeremove"
              :on-remove="Remove"
              :file-list="extInfo.fileList"
            >
              <el-button size="small" type="primary" :disabled="!ismodify"
                >点击上传</el-button
              >
            </el-upload>
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
  </div>
</template>

<script>
import config from "/config.js";

export default {
  name: "taskxxmsg",
  props: {
    extInfo: {},
    basicInfo: {},
    ismodify: "",
    type: "",
  },
  data() {
    return {
      isType:false,
      taskTypeName:null,
      title: "",
      dialogTableVisible: false,
      dialogTableVisible1:false,
      listData: [],
      frontTask: "",
      frontTaskId: "",
      afterTask: "",
      afterTaskId: "",
      tags:[],
      page: {
        pageNo: 1,
        total: 1000,
      },
      page1: {
        pageNo: 1,
        total: 1000,
      },
      imgPath: "#",
      imgfile: "",
      dialogVisible: false,

      taskStatus: [],
      approveList: [],
      search: {
        personType: "发起人",
        taskinfo: "任务标题",
        taskStatus: "任务状态",

        personList: ["发起人", "责任人", "责任部门"],
        infoList: ["任务标题","任务编码", "开始时间", "结束时间", "任务层级", "任务类型"],
        statusList: ["任务状态", "任务审批状态"],

        pertxt: "请选择",
        publisher: "",
        manager: "",
        managerDepartment: "",

        title: "",
        taskLevel: "",
        taskType: "",
        startDate: [],
        endTime: [],
        taskNum:'',

        approveState: "",
        taskState: "",
      },
      search1: {
        personType: "发起人",
        taskinfo: "任务标题",
        taskStatus: "任务状态",

        personList: ["发起人", "责任人", "责任部门"],
        infoList: ["任务标题","任务编码", "开始时间", "结束时间", "任务层级", "任务类型"],
        statusList: ["任务状态", "任务审批状态"],

        pertxt: "请选择",
        publisher: "",
        manager: "",
        managerDepartment: "",

        title: "",
        taskLevel: "",
        taskType: "",
        startDate: [],
        endTime: [],
        taskNum:'',

        approveState: "",
        taskState: "",
      },
    };
  },
  created(){
    this.getTaskType()
  },
  mounted() {
    // this.getqztaskData();
    this.getlist();
    if(top.location.href.split("isType=")[1]=='dinqi'){
      this.isType = true
    }
    console.log('详情页basicInfo',this.basicInfo)
    console.log('详情页extInfo',this.extInfo)
  },
  watch:{
    ismodify:{
      handler(newVal,oldVal){
        if(newVal == true){
        console.log('this.basicInfo.taskType',this.basicInfo.taskType)
          if(Array.isArray(this.basicInfo.taskType)){
            this.basicInfo.taskType = this.basicInfo.taskType[0]
          }
        }
    }
  },
  },
  methods: {
    // 前置任务穿透
    showFrontTask(){
      console.log('前置任务',this.extInfo.frontTaskId)
      if(this.extInfo.frontTaskId && !this.ismodify){
        let url1 = top.window.location.href.split('taskId=')[0]
        let url2 = top.window.location.href.split('taskId=')[1].split('&type')[1]
        window.open(`${url1}taskId=${this.extInfo.frontTaskId}&type=${url2}`,'_self')
      }
      else{
        return
      }
    },
    // 后置任务穿透
    showAfterTask(){
      console.log('后置任务',this.extInfo.afterTaskId)
      if(this.extInfo.afterTaskId && !this.ismodify){
        let url1 = top.window.location.href.split('taskId=')[0]
        let url2 = top.window.location.href.split('taskId=')[1].split('&type')[1]
        window.open(`${url1}taskId=${this.extInfo.afterTaskId}&type=${url2}`,'_self')
      }
    },
    // 获取任务列表
    getTaskData(params){
      if(params=='qz'){
        this.getqztaskData()
        this.dialogTableVisible = true
      }
      else{
        this.gethztaskData()
        this.dialogTableVisible1 = true
      }
    },
    // 获取任务类型
    getTaskType(){
        this.$http.query("/seeyon/rest/bhtTaskIndex/enum/tag").then(res =>{
          if(res.code == 0){
              this.tags = res.data
              if(!this.isType){
                let index=null
                this.tags.forEach((it,id)=>{
                if(it.label == '定期工作'){
                  index = id
                }
                })
                console.log('index',index)
                this.tags.splice(index,1)
              }
            }
        })
    },
    setval(currentValue, oldValue) {
      if (currentValue == 0 || currentValue == "") {
        currentValue = null;
        this.search.taskLevel = null;
      }
    },
    restsear() {
      if (this.search.personType == "发起人") {
        this.search.publisher = "";
        this.search.managerDepartment = "";
      } else if (this.search.personType == "责任人") {
        this.search.manager = "";
        this.search.managerDepartment = "";
      } else if (this.search.personType == "责任部门") {
        this.search.publisher = "";
        this.search.manager = "";
      } else if (this.search.personType == "") {
        this.search.publisher = "";
        this.search.manager = "";
        this.search.managerDepartment = "";
      }

      if (this.search.taskinfo == "任务标题") {
        this.search.taskLevel = "";
        this.search.taskType = "";
        this.search.startDate = "";
        this.search.endTime = "";
      } else if (this.search.taskinfo == "开始时间") {
        this.search.title = "";
        this.search.taskLevel = "";
        this.search.taskType = "";
        this.search.endTime = "";
      } else if (this.search.taskinfo == "结束时间") {
        this.search.title = "";
        this.search.taskLevel = "";
        this.search.taskType = "";
        this.search.startDate = "";
      } else if (this.search.taskinfo == "任务层级") {
        this.search.title = "";
        this.search.taskType = "";
        this.search.startDate = "";
        this.search.endTime = "";
      } else if (this.search.taskinfo == "任务类型") {
        this.search.title = "";
        this.search.taskLevel = "";
        this.search.startDate = "";
        this.search.endTime = "";
      } else if (this.search.taskinfo == "") {
        this.search.title = "";
        this.search.taskLevel = "";
        this.search.taskType = "";
        this.search.startDate = "";
        this.search.endTime = "";
      }

      if (this.search.taskStatus == "任务状态") {
        this.search.approveState = "";
      } else if (this.search.approveState == "任务审批状态") {
        this.search.taskState = "";
      } else if (this.search.taskStatus == "") {
        this.search.approveState = "";
        this.search.taskState = "";
      }
    },
    contains(arr, obj) {
      let i = arr.length;
      while (i--) {
        if (arr[i] === obj) {
          return i;
        }
      }
      return false;
    },
    gopimg() {
      for (
        let i = this.contains(this.extInfo.fileList, this.imgfile) - 1;
        i >= 0;
        i--
      ) {
        if (this.extInfo.fileList[i].mimeType.slice(0, 5) == "image") {
          this.imgPath = "#";
          this.imgPath = `/seeyon/fileUpload.do?method=showRTE&fileId=${encodeURI(
            this.extInfo.fileList[i].fileUrl
          )}&type=image&showType=big`;
          this.imgfile = this.extInfo.fileList[i];
          break;
        }
      }
    },
    topimg() {
      for (
        let i = this.contains(this.extInfo.fileList, this.imgfile) + 1;
        i < this.extInfo.fileList.length;
        i++
      ) {
        if (this.extInfo.fileList[i].mimeType.slice(0, 5) == "image") {
          this.imgPath = "#";
          this.imgPath = `/seeyon/fileUpload.do?method=showRTE&fileId=${encodeURI(
            this.extInfo.fileList[i].fileUrl
          )}&type=image&showType=big`;
          this.imgfile = this.extInfo.fileList[i];
          break;
        }
      }
    },
    getlist() {
      this.$http
        .query(`/seeyon/rest/bhtTaskIndex/enum/taskState`)
        .then((res) => {
          let { code, data } = res;
          if (code == 0) {
            this.taskStatus = res.data;
          }
        });
      this.$http
        .query(`/seeyon/rest/bhtTaskIndex/enum/approveState`)
        .then((res) => {
          let { code, data } = res;
          if (code == 0) {
            this.approveList = res.data;
          }
        });
    },
    selectPeopless(n) {
      let _this = this;
      let type;
      let peo;
      let stype;
      if (n == "发起人") {
        type = "selectPeople";
        peo = "publisher";
        stype = "Member";
      } else if (n == "责任人") {
        type = "selectPeople";
        peo = "manager";
        stype = "Member";
      } else {
        type = "Department";
        peo = "managerDepartment";
        stype = "Department,Team";
      }

      parent.$.selectPeople({
        // 授权时的组织机构面板内容
        type: type,
        panels: "Department,Team,Post,Outworker,RelatePeople",
        selectType: stype,
        onlyLoginAccount: true,
        isNeedCheckLevelScope: false, //不受职务级别控制
        minSize: 1, //只能选择1个人
        maxSize: 1, //
        fillBackData: {},
        callback(result) {
          _this.$set(_this.search, peo, result.obj[0].id);
          _this.$set(_this.search, "pertxt", result.text);
        },
      });
    },
    searcht() {
      this.getqztaskData(this.search);
    },
    searcht1() {
      this.gethztaskData(this.search1);
    },
    setqk() {
      Object.assign(this.$data.search, this.$options.data().search); // 重置data对象到初始化状态
    },
    setqk1() {
      Object.assign(this.$data.search1, this.$options.data().search1); // 重置data对象到初始化状态
    },
    fy(val) {
      this.page.pageNo = val;
      this.getqztaskData();
    },
    fy1(val) {
      this.page1.pageNo = val;
      this.gethztaskData();
    },
    cz() {
      this.extInfo.frontTask = this.frontTask;
      this.extInfo.frontTaskId = this.frontTaskId;
      this.dialogTableVisible = false;
    },
     cz1() {
      this.extInfo.afterTask = this.afterTask;
      this.extInfo.afterTaskId = this.afterTaskId;
      this.dialogTableVisible1 = false;
    },
    handleCurrentChange(val) {
      if (val) {
        this.frontTask = val.basicInfo.title;
        this.frontTaskId = val.basicInfo.taskId;
      }
    },
    handleCurrentChange1(val) {
      if (val) {
        this.afterTask = val.basicInfo.title;
        this.afterTaskId = val.basicInfo.taskId;
      }
    },
    filterParams(obj) {
      var _newPar = {};
      for (var key in obj) {
        if (
          (obj[key] === 0 || obj[key] === false || obj[key]) &&
          obj[key].toString().replace(/(^\s*)|(\s*$)/g, "") !== ""
        ) {
          _newPar[key] = obj[key];
        }
      }
      return _newPar;
    },

    getqztaskData(n) {
      let obj = this.filterParams({
        publisher: this.search.publisher,
        manager: this.search.manager,
        managerDepartment: this.search.managerDepartment,
        taskLevel: this.search.taskLevel == 0 ? "" : this.search.taskLevel,
        taskType: this.search.taskType,
        startDate: this.search.startDate.toString(),
        endTime: this.search.endTime.toString(),
        taskState: this.search.taskState,
        approveState: this.search.approveState,
        title: this.search.title,
        taskNum:this.search.taskNum,
        isTaskId:new URLSearchParams(window.location.search).get('taskId').toString()
      });
      obj.taskType = top.window.location.href.split("isType=")[1]
      this.$http
        .post(`/seeyon/rest/bhtTask/search/front/${this.page.pageNo}/10`, obj)
        .then((res) => {
          let { code, data } = res;
          if (code == 0) {
            this.listData = res.data.data;
            this.page.pageNo = res.data.pageNo;
            this.page.total = res.data.total;
          } else {
          }
        });
    },
    gethztaskData(n) {
      let obj = this.filterParams({
        publisher: this.search1.publisher,
        manager: this.search1.manager,
        managerDepartment: this.search1.managerDepartment,
        taskLevel: this.search1.taskLevel == 0 ? "" : this.search1.taskLevel,
        taskType: this.search1.taskType,
        startDate: this.search1.startDate.toString(),
        endTime: this.search1.endTime.toString(),
        taskState: this.search1.taskState,
        approveState: this.search1.approveState,
        title: this.search1.title,
        taskNum:this.search1.taskNum,
        isTaskId:new URLSearchParams(window.location.search).get('taskId').toString()
      });

      this.$http
        .post(`/seeyon/rest/bhtTask/search/after/${this.page1.pageNo}/10`, obj)
        .then((res) => {
          let { code, data } = res;
          if (code == 0) {
            this.listData = res.data.data;
            this.page1.pageNo = res.data.pageNo;
            this.page1.total = res.data.total;
          } else {
          }
        });
    },
    showfile(file) {
      if (file.response) {
        file = file.response.atts[0];
      }

      if (file.mimeType.slice(0, 5) == "image") {
        this.imgPath = "#";
        this.imgPath = `/seeyon/fileUpload.do?method=showRTE&fileId=${encodeURI(
          file.fileUrl
        )}&type=image&showType=big`;
        this.imgfile = file;
        this.dialogVisible = true;
      } else if (file.mimeType == "application/pdf") {
        window.open(
          encodeURI(
            `/seeyon/fileDownload.do?method=doDownload4Office&type=Pdf&isOpenFile=true&fileId=${encodeURI(
              file.fileUrl
            )}&createDate=${file.createdate.slice(0, 10)}&filename=${encodeURI(
              file.filename
            )}`
          )
        );
      } else {
        window.location.href = encodeURI(
          `/seeyon/rest/attachment/file/${encodeURI(
            file.fileUrl
          )}?fileName=${encodeURI(file.filename)}`
        );
      }
    },
    downloadimg() {
      let file = this.imgfile;
      window.location.href = encodeURI(
        `/seeyon/rest/attachment/file/${encodeURI(
          file.fileUrl
        )}?fileName=${encodeURI(file.filename)}`
      );
    },
    selectPeoples() {
      let _this = this;
      let str = "";
      if (this.extInfo.joinDepartmentIds != null) {
        let joinArr = this.extInfo.joinDepartmentIds.split(",");
        joinArr.forEach((join) => {
          str += "Department|" + join + ",";
        });
        str = str.substring(0, str.length - 1);
      }
      parent.$.selectPeople({
        // 授权时的组织机构面板内容
        type: "Department",
        panels: "Department,Team,Post,Outworker,RelatePeople",
        selectType: "Department,Team",
        onlyLoginAccount: true,
        isNeedCheckLevelScope: false, //不受职务级别控制
        // excludeElements:str,
        params: {
          text: _this.extInfo.joinDepartments,
          value: str,
        },
        fillBackData: {},
        callback(result) {
          //const progressBar = ctpTop.$.progressBar({ text: `` });
          //_this.$emit('changeAuth', list, result, progressBar);
          let arr = [];
          result.obj.forEach((d) => {
            arr.push(d.id);
          });
          _this.$set(_this.extInfo, "joinDepartments", result.text);
          _this.$set(_this.extInfo, "joinDepartmentIds", arr.toString());
        },
      });
    },
    selectPeople() {
      let _this = this;
      let str = "";
      if (this.extInfo.joinerIds != null) {
        let joinArr = this.extInfo.joinerIds.split(",");
        joinArr.forEach((join) => {
          str += "Member|" + join + ",";
        });
        str = str.substring(0, str.length - 1);
      }
      parent.$.selectPeople({
        // 授权时的组织机构面板内容
        type: "selectPeople",
        panels: "Department,Team,Post,Outworker,RelatePeople",
        selectType: "Member",
        onlyLoginAccount: true,
        isNeedCheckLevelScope: false, //不受职务级别控制
        // excludeElements:str,
        params: {
          text: _this.extInfo.joiners,
          value: str,
        },
        fillBackData: {},
        callback(result) {
          //const progressBar = ctpTop.$.progressBar({ text: `` });
          //_this.$emit('changeAuth', list, result, progressBar);
          let arr = [];
          result.obj.forEach((d) => {
            arr.push(d.id);
          });
          _this.$set(_this.extInfo, "joiners", result.text);
          _this.$set(_this.extInfo, "joinerIds", arr.toString());
        },
      });
    },
    selectPeople1() {
      let _this = this;
      let str = "";
      if (this.extInfo.approver != null) {
        let joinArr = this.extInfo.approver.split(",");
        joinArr.forEach((join) => {
          str += "Member|" + join + ",";
        });
        str = str.substring(0, str.length - 1);
      }
      parent.$.selectPeople({
        // 授权时的组织机构面板内容
        type: "selectPeople",
        panels: "Department,Team,Post,Outworker,RelatePeople",
        selectType: "Member",
        onlyLoginAccount: true,
        isNeedCheckLevelScope: false, //不受职务级别控制
        minSize: 1,//只能选择1个人
        maxSize: 1,//
        // excludeElements:str,
        params: {
          text: _this.extInfo.approver,
          value: str,
        },
        fillBackData: {},
        callback(result) {
          //const progressBar = ctpTop.$.progressBar({ text: `` });
          //_this.$emit('changeAuth', list, result, progressBar);
          let arr = [];
          result.obj.forEach((d) => {
            arr.push(d.id);
          });
          _this.$set(_this.extInfo, "approverName", result.text);
          _this.$set(_this.extInfo, "approver", arr.toString());
        },
      });
    },
    selectPeople2() {
      let _this = this;
      let strId = `Member|${this.basicInfo.publishId}`;
      let name = this.basicInfo.publisher
      parent.$.selectPeople({
        // 授权时的组织机构面板内容
        type: 'selectPeople',
        panels: 'Department,Team,Post,Outworker,RelatePeople',
        selectType: 'Member',
        onlyLoginAccount: true,
        isNeedCheckLevelScope: false,//不受职务级别控制
        minSize: 1,//只能选择1个人
        maxSize: 1,//
        excludeElements: strId,
        params: {
          text: _this.basicInfo.publisher,
          value: strId
        },

        fillBackData: {},
        callback(result) {
          //const progressBar = ctpTop. parent.$progressBar({ text: `` });
          //_this.$emit('changeAuth', list, result, progressBar);
          _this.$set(_this.basicInfo, 'publisher', result.text);
          _this.$set(_this.basicInfo, 'publishId', result.value.slice(7));

        }
      });
    },
    selectPeopled() {
      let _this = this;
      let strId = `Member|${this.extInfo.superviseId}`;
      parent.$.selectPeople({
        // 授权时的组织机构面板内容
        type: "selectPeople",
        panels: "Department,Team,Post,Outworker,RelatePeople",
        selectType: "Member",
        onlyLoginAccount: true,
        isNeedCheckLevelScope: false, //不受职务级别控制
        minSize: 1, //只能选择1个人
        maxSize: 1, //
        params: {
          text: _this.extInfo.supervise,
          value: strId,
        },
        fillBackData: {},
        callback(result) {
          //const progressBar = ctpTop.$.progressBar({ text: `` });
          //_this.$emit('changeAuth', list, result, progressBar);
          let arr = [];
          result.obj.forEach((d) => {
            arr.push(d.id);
          });
          _this.$set(_this.extInfo, "supervise", result.text);
          _this.$set(_this.extInfo, "superviseId", arr.toString());
        },
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warningrow";
      } else {
      }
    },
    uploads() {
      this.$refs.upload.submit();
    },
    handleChange(file, fileList) {
      // this.extInfo.fileList = fileList.slice(-3);
    },
    handleAvatarSuccess(res, file, fileList) {
      let arr = [];
      arr.push(res.atts[0].fileUrl);
      this.extInfo.fieldIds = arr.toString();
      let obj = {
        fileIds: this.extInfo.fieldIds,
      };
      this.$http
        .post(
          `/seeyon/rest/taskDetail/attachments/upload/${this.basicInfo.taskId}/${this.extInfo.subReference}`,
          obj
        )
        .then((res) => {
          let { code, data } = res;
          if (code == 0) {
          } else {
          }
        });
    },
    beforeremove(file) {
      return this.$confirm(`确定移除该文件 ${file.name}？`);
    },
    Remove(file, fileList) {
      let _this = this;
      // if (file.response){
      //     file = file.response.atts[0]
      // }
      // _this.$message({
      //     type: 'success',
      //     message: '删除成功!'
      // });
      this.$http
        .query(`/seeyon/rest/taskDetail/attachments/delete/${file.id}`)
        .then((res) => {
          let { code, data } = res;
          if (code == 0) {
            if (file.response) {
              file = file.response.atts[0];
            }
            _this.$message({
              type: "success",
              message: "删除成功!",
            });
          } else {
            this.$message({
              type: "info",
              message: "删除失败!",
            });
          }
        });
    },
    emptyFrontTask() {
      this.extInfo.frontTaskId = null;
      this.extInfo.frontTask = "";
    },
    emptyAfterTask() {
      this.extInfo.afterTaskId = null;
      this.extInfo.afterTask = "";
    },
  },
};
</script>

<style scoped>
@import "../../assets/icon.css";

.tabbox /deep/ .current-row {
  background-color: #f96765 !important;
}
.taskId /deep/ .el-input__inner{
  background-color:#fff;
  border:#fff;
}
.iconfont {
  color: #409eff;
  font-size: 16px;
  margin-right: 10px;
}
.diobox /deep/ .el-dialog__body {
  padding: 5px 20px;
}

.imgbox::-webkit-scrollbar {
  width: 4px;
  height: 10px;
  /**/
}

.imgbox::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

.imgbox::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}

.imgbox::-webkit-scrollbar-thumb:hover {
  background: #333;
}

.imgbox::-webkit-scrollbar-corner {
  background: #179a16;
}
</style>
